<template>
  <a-dropdown :trigger="['click']" v-model:open="visible">
    <a-button :icon="icon" :type="buttonType" :size="size">
      {{ buttonText }}
    </a-button>
    <template #overlay>
      <a-menu @click="handleMenuClick">
        <a-menu-item v-if="showChat" key="chat">
          <MessageOutlined />
          查看对话
        </a-menu-item>
        <a-menu-item v-if="showDetail" key="detail">
          <InfoCircleOutlined />
          查看详情
        </a-menu-item>
        <a-menu-item v-if="showEdit && canEdit" key="edit">
          <EditOutlined />
          编辑应用
        </a-menu-item>
        <a-menu-item v-if="showDeploy && canEdit" key="deploy" :disabled="deployLoading">
          <RocketOutlined />
          {{ app.deployKey ? '重新部署' : '部署' }}
        </a-menu-item>
        <a-menu-item v-if="showViewWork && app.deployKey" key="view-work">
          <GlobalOutlined />
          查看作品
        </a-menu-item>
        <a-menu-divider v-if="showDelete && canEdit" />
        <a-menu-item v-if="showDelete && canEdit" key="delete" class="danger-item">
          <DeleteOutlined />
          删除应用
        </a-menu-item>
      </a-menu>
    </template>
  </a-dropdown>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import {
  MessageOutlined,
  InfoCircleOutlined,
  EditOutlined,
  RocketOutlined,
  GlobalOutlined,
  DeleteOutlined,
  MoreOutlined
} from '@ant-design/icons-vue'

interface Props {
  app: any
  canEdit?: boolean
  deployLoading?: boolean
  showChat?: boolean
  showDetail?: boolean
  showEdit?: boolean
  showDeploy?: boolean
  showViewWork?: boolean
  showDelete?: boolean
  buttonText?: string
  buttonType?: 'primary' | 'default' | 'text'
  size?: 'small' | 'middle' | 'large'
  icon?: any
}

interface Emits {
  (e: 'chat', app: any): void
  (e: 'detail', app: any): void
  (e: 'edit', app: any): void
  (e: 'deploy', app: any): void
  (e: 'view-work', app: any): void
  (e: 'delete', app: any): void
}

const props = withDefaults(defineProps<Props>(), {
  canEdit: false,
  deployLoading: false,
  showChat: true,
  showDetail: true,
  showEdit: true,
  showDeploy: true,
  showViewWork: true,
  showDelete: true,
  buttonText: '操作',
  buttonType: 'default',
  size: 'middle',
  icon: MoreOutlined
})

const emit = defineEmits<Emits>()

const visible = ref(false)

const handleMenuClick = ({ key }: { key: string }) => {
  visible.value = false

  switch (key) {
    case 'chat':
      emit('chat', props.app)
      break
    case 'detail':
      emit('detail', props.app)
      break
    case 'edit':
      emit('edit', props.app)
      break
    case 'deploy':
      emit('deploy', props.app)
      break
    case 'view-work':
      emit('view-work', props.app)
      break
    case 'delete':
      emit('delete', props.app)
      break
  }
}
</script>

<style scoped>
:deep(.danger-item) {
  color: #ff4d4f;
}

:deep(.danger-item:hover) {
  background-color: #fff2f0;
}
</style>
